<template>
  <div class="ContactPerson">
    <div class="searchNav" style="display: flex;justify-content: space-between;">
      <!-- <h2>联系人</h2> -->
      <div>
        <a-button
          class="button"
          icon="plus"
          type="primary"
          style="margin-left: 0;background-color: #1890ff; color: #ffffff;"
          @click="handleAdd">新增</a-button>
        <a-button class="button1" type="text" @click="handleDownload" style="color: #1890ff;margin: 0 8px;">下载模板</a-button>
        <a-button class="button2" type="text" @click="event" style="color: #1890ff;">导入数据</a-button>
      </div>
      <div class="searchParams" style="display: flex;padding-bottom: 10px;">
        <div>
          <radioGroup @radioChange="radioChange" @complete="radioComplete" />
        </div>
        <a-input
          style="margin: 0 10px;"
          class="input"
          v-model="queryParam.keyword"
          placeholder="请输入签收人/电话"
          clearable
          @keydown.enter.native="getDataList"></a-input>
        <a-button class="button" @click="getDataList">查询</a-button>
      </div>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%" height="calc(100vh - 240px)" :max-height="height" v-loading="loading">
        <!-- <el-table-column prop="CompanyName" label="所属公司" width="200">
        </el-table-column> -->
        <el-table-column prop="cName" label="签收人"> </el-table-column>
        <el-table-column prop="cPhone" label="签收电话"> </el-table-column>
        <el-table-column prop="cCusName" label="客户"> </el-table-column>
        <el-table-column prop="IdCard" label="身份证号"> </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="sendCode(scope.row)">发送</el-button>
            <el-button type="text" @click="handleView(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <a-pagination
        layout="total,prev, pager, next,sizes"
        :total="pagination.total"
        :current-page="pagination.current"
        :page-size="pagination.pageSize"
        :page-sizes="pagination.pageSizeOptions"
        style="text-align: right; margin-top: 8px; padding: 0"
        @current-change="currentChange"
        @size-change="handleSizeChange">
      </a-pagination>
    </div>
    <el-dialog title="导入数据" :visible.sync="dialogVisible" width="20%" destroy-on-close>
      <el-upload
        style="text-align: center"
        class="upload-demo"
        :action="`https://api.yoojet.com/BO/CustomerLinkman/Import?CompanyId=${this.queryParam.SupplieId}`"
        :on-success="handlesuccess"
        :on-progress="handleprogres"
        :limit="10"
        :on-exceed="handleExceed"
        :file-list="fileList">
        <a-button size="small" type="primary">点击上传</a-button>
      </el-upload>
    </el-dialog>
    <EditForm ref="editForm" :parentObj="{ ...this }" />
  </div>
</template>

<script>
import radioGroup from '@/components/components/CompanyRadioGroup'
import EditForm from './ContactPersonForm.vue'
import { download } from '@/utils/Tools'
export default {
  props: {},
  components: {
    EditForm,
    radioGroup
  },
  mounted () { },
  computed: {
    height () {
      return document.documentElement.clientHeight * 0.75
    }
  },
  created () { },
  data () {
    return {
      fileList: [],
      dialogVisible: false,
      pagination: {
        current: 1,
        pageSize: 25,
        total: 0,
        pageSizeOptions: [25, 50, 100]
      },
      sorter: {
        field: 'Id',
        order: 'desc'
      },
      tableData: [],
      queryParam: { SupplieId: '全部' },
      loading: false
    }
  },
  methods: {
    handleprogres (event, file, fileList) {
      // console.log(event, file, fileList, '上传中')
    },
    handlesuccess (response, file, fileList) {
      if (response.Success) {
        this.$message.success(response.Msg)
        this.dialogVisible = false
        setTimeout(() => {
          this.getDataList()
        })
      } else {
        this.$message.error(response.Msg)
        this.fileList = []
      }
    },
    event () {
      if (this.queryParam.SupplieId.split(',').length > 1) {
        this.$message.error('请选择公司')
        return
      }
      this.dialogVisible = true
    },

    handleExceed () {
      this.$message.error('已超出文件列表最大数，请删除后上传')
      console.log('文件超出限制')
    },
    handleDownload () {
      download(
        'https://api.yoojet.com/BO/CustomerLinkman/ExportToExcel',
        '签收人导入模板'
      )
    },
    // 发送密码
    sendCode (row) {
      this.$httpp
        .post('/BO/CustomerLinkman/GetMessagePwd?Phone=' + row.cPhone)
        .then((res) => {
          if (res.Success) {
            this.$message.success('密码已成功发送至客户手机')
          } else {
            this.$message.error(res.Msg)
          }
        })
    },
    radioComplete (e) {
      if (e) {
        this.queryParam.SupplieId = e
        this.getDataList()
      }
    },
    radioChange (e) {
      console.log(e)
      if (e == 'more') return
      this.queryParam.SupplieId = e
      this.getDataList()
    },
    handleAdd () {
      // this.$refs.editForm.openForm(null);
      if (this.queryParam.SupplieId.split(',').length > 1) {
        this.$refs.editForm.openForm()
      } else {
        this.$refs.editForm.openForm(null, this.queryParam.SupplieId)
      }
    },
    handleView (row) {
      this.$refs.editForm.openForm(row.Id)
    },
    currentChange (page) {
      this.pagination.current = page
      this.getDataList()
    },
    handleSizeChange (lint) {
      this.pagination.pageSize = lint
      this.getDataList()
    },
    getDataList () {
      this.loading = true
      this.$httpp
        .post('/BO/CustomerLinkman/GetDataList', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order,
          Search: this.queryParam
        })
        .then((resJson) => {
          this.loading = false
          if (resJson.Success) {
            this.tableData = resJson.Data
            if (this.tableData) {
              const pagination = { ...this.pagination }
              pagination.total = resJson.Total
              this.pagination = pagination
            }
          }
        })
    }
  },
  watch: {}
}
</script>

<style lang="less" scoped>

.button1 {
  color: #1890ff;
}

.button1:hover {
  color: #1890ff;
}
</style>
